<template>
  <div>
    <h2>报修统计</h2>
    <div id="chartone" class="one"></div>
  </div>
</template>
  
  <script setup>
import { inject, onMounted, reactive } from "vue";
import link from "../api/link";
import url from "../api/urls";

let $echarts = inject("echarts");
onMounted(() => {
  let myChart = $echarts.init(document.getElementById("chartone"));
  link(url.chartDataThree).then((res) => {
    const option = {
      height:"260px",
      color: ["#85FFBD", "#D77D4C", "#DF94D8", "#5DD3D5", "#EC5976", "#E32828"],
      legend: {
        top: "bottom",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: "具体数据",
          type: "pie",
          radius: [10, 100],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
          data: res.data,
        },
      ],
      toolbox: {
        y: -30,
        show: true,
      },
    };
    myChart.setOption(option);
  });
});
</script>
  
  <style lang="scss" scoped>
h2 {
  height: 22px;
  color: #fff;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
}
.one {
  height: 300px;
}
</style>